<template>
  <div class="fileList" ref="viewerdom">
    <div
        v-for="(item,index) in files"
        :key="item.path+index"
        class="item"
        @mouseover="mouseover(index)"
        @mouseleave="mouseout(index)"
    >
      <div>
        <img :src="item.path"
        >
      </div>
      <div :class="{'operator':item.show}" class="hide">
        <el-icon style="color: #f39fb4" v-if="edit&&item.show" @click="delFile(item.path,index)">
          <delete/>
        </el-icon>
        <el-icon @click="showImage(index)" v-if="item.show" style="color: #f1f5f1;margin-left: 10px;"><View/></el-icon>
      </div>
    </div>
    <el-upload
        v-show="files.length<max&&edit"
        action=""
        drag
        class="uploader"
        accept='image/png,image/jpg,image/jpeg,image/gif'
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
    >
      <div class="upload-msg">
        <el-icon>
          <upload-filled/>
        </el-icon>
        <span style="font-size: 13px;">拖拽或者点击上传</span>
        <span style="font-size: 12px;line-height: 14px;margin: 11px;text-align: left">
          支持  <strong>.jpg .jpeg .png .gif </strong>
      </span>
      </div>
    </el-upload>
  </div>
</template>

<script lang="ts" setup>

import {ElFile} from "element-plus/es/components/upload/src/upload.type";
import {ElMessage, ElMessageBox} from "element-plus";
import {upload} from "@/api/upload";
import {watch, ref} from "vue";
import "viewerjs/dist/viewer.css";
import Viewer from "viewerjs";

const viewerdom = ref<HTMLDivElement>()

interface Item {
  path: string
  show?: boolean
}

const props = defineProps({
  urls: {
    type: String,
    default: ''
  },
  max: {
    type: Number,
    default: 10
  },
  edit: {
    type: Boolean,
    default: true
  },
});

interface IEmitsType {
  (e: 'update:urls', url: string): void;
}

const emit = defineEmits<IEmitsType>();

const files = ref<Item[]>([])

watch(() => props.urls, () => {
  const arr = props.urls.split(',')
  if (arr.length > 0 && arr[0].length > 1) {
    const objs: Item[] = []
    arr.forEach((item) => {
      objs.push({path: item})
    })
    files.value = objs
  } else {
    files.value = []
  }
}, {immediate: true})

const updateList = () => {
  const arr: string[] = []
  files.value.forEach((item) => {
    arr.push(item.path)
  })
  emit('update:urls', arr.join(','))
}

const mouseover = (index: number) => {
  files.value[index].show = true
}

const mouseout = (index: number) => {
  files.value[index].show = false
}

const showImage = (index: number) => {
  const viewer = new Viewer(viewerdom.value!, {
    title: false,
    hide: () => {
      viewer.destroy()
    }
  });
  viewer.view(index)
}

// 图片移除
const delFile = (item: string, index: number) => {
  ElMessageBox.confirm(`是否移除图片 `, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    files.value.splice(index, 1)
    updateList()
  })
}

// 图片上传
const beforeAvatarUpload = (file: ElFile) => {
  const isJPG = file.type === 'image/jpeg'
  const isLt5M = file.size / 1024 / 1024 < 20

  if (!isJPG) {
    ElMessage.error('Avatar picture must be JPG format!')
  }
  if (!isLt5M) {
    ElMessage.error('Avatar picture size can not exceed 20MB!')
  }
  if (isJPG && isLt5M) {
    upload('image', file).then((data) => {
      files.value.push({path: data.path})
      updateList()
    })
  }
  return false;
}
</script>

<style lang="scss" scoped>

div.fileList {
  display: grid;
  grid-gap: 3px 3px;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  width: 100%;

  & > div {
    border: 1px #c5d2e0 dashed;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    position: relative;

    img {
      max-height: 200px;
      width: 100%;
      margin-top: 11px;
    }

    .hide {
      height: 0px;
      transition: all 0.2s;

    }

    & > .operator {
      z-index: 10;
      position: absolute;
      background: rgba(89, 95, 101, 0.8);
      border-radius: 5px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      i {
        cursor: pointer;
        border-radius: 5px;
        font-size: 30px;
      }
    }
  }


}

div.upload-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 180px;
  width: 180px;

  i {
    font-size: 40px;
    font-weight: bold;
  }

  &:hover {
    color: #087ac5;
  }
}

::v-deep .uploader .el-upload {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

::v-deep .el-upload-dragger {
  width: 100%;
  border: none;
}

</style>
